<template>
  <!--  :row-class-name="tableRowClassName" -->
  <el-table
    ref="singleTableRef"
    :data="tableData"
    style="width: 600%"
    :height="tableConfig.height"
    :stripe="tableConfig.stripe"
    table-layout="auto"
    :highlight-current-row="tableConfig.highlightCurrentRow ?? false"
    @selection-change="selectionChangeHandle"
    @current-change="handleCurrentChange"
    :header-cell-style="{
      background: '#FAFAFD',
      color: '#606266',
      textAlign: 'center'
    }"
    :cell-style="{ fontSize: '14px', color: '#1D2129', textAlign: 'center' }"
  >
    <el-table-column
      label=""
      v-if="tableConfig.showSingleSelect"
      fixed
      width="60"
    >
      <template #default="{ row }">
        <slot name="single-select" :row="row"></slot>
      </template>
    </el-table-column>
    <el-table-column
      v-if="tableConfig.showSelect"
      type="selection"
      :selectable="selectable"
      min-width="60"
    />
    <el-table-column
      v-if="tableConfig.showIndex"
      label="序号"
      type="index"
      fixed
      min-width="80px"
      align="center"
    >
      <template #default="scope">
        <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <template v-for="item in tableColumn">
      <el-table-column
        :label="item.label"
        :prop="item.prop"
        :align="item.align ?? null"
        :width="item.width ?? null"
        :min-width="item.minWidth ?? null"
        :show-overflow-tooltip="item.showOverflowTooltip ?? false"
        :fixed="item.fixed ?? false"
      >
        <template #default="{ row, $index }">
          <!-- 可点击：ETableType[2] -->
          <template v-if="item.type === ETableType[2]">
            <div :style="{ width: '100%', wordBreak: 'break-all' }">
              <el-link
                :icon="
                  item.linkBtnOptions?.iconHref
                    ? item.linkBtnOptions?.iconHref
                    : null
                "
                :type="
                  item.linkBtnOptions?.type
                    ? item.linkBtnOptions.type
                    : 'primary'
                "
                :underline="
                  item.linkBtnOptions?.underline
                    ? item.linkBtnOptions.underline
                    : false
                "
                :disabled="
                  item.linkBtnOptions?.disabled
                    ? item.linkBtnOptions.disabled
                    : false
                "
                @click="item.clickHandle ? item.clickHandle(row, $index) : ''"
              >
                <slot name="clickableOk"></slot>
                {{ item.valueGetter ? item.valueGetter(row) : row[item.prop] }}
              </el-link>
            </div>
          </template>

          <!-- 操作：ETableType[3] -->
          <template v-else-if="item.type === ETableType[3]">
            <div
              :style="{ width: '100%', wordBreak: 'break-all' }"
              style="
                display: flex;
                justify-content: center;
                grid-column-gap: 10px;
              "
            >
              <template v-for="ele in item.btnList">
                <el-link
                  v-if="
                    ele.displayGetter
                      ? ele.displayGetter(row)
                      : ele?.display ?? true
                  "
                  :icon="ele?.iconHref ? ele?.iconHref : null"
                  :type="ele?.type ? ele.type : 'primary'"
                  :underline="ele?.underline ? ele.underline : false"
                  :disabled="
                    ele.disabledGetter
                      ? ele.disabledGetter(row)
                      : ele?.disabled
                      ? ele.disabled
                      : false
                  "
                  @click="ele.clickHandle ? ele.clickHandle(row, $index) : ''"
                >
                  <slot name="operate"></slot>
                  {{ ele.valueGetter ? ele.valueGetter(row) : ele.label }}
                </el-link>
              </template>
            </div>
          </template>

          <!-- 插槽：ETableType[1] -->
          <template v-else-if="item.type === ETableType[4]">
            <slot :name="item.prop" :row="row"></slot>
          </template>

          <!-- 普通：ETableType[1] -->
          <template v-else>
            <div :style="{ width: '100%', wordBreak: 'break-all' }">
              {{ item.valueGetter ? item.valueGetter(row) : row[item.prop] }}
            </div>
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup lang="ts">
/** 通用表格 */
import { toRefs, ref } from 'vue';
import type { ITableColumn, ITableConfig } from './tablePageInterface';
import { ETableType } from './tableTools';

const props = defineProps({
  tableConfig: {
    type: Object,
    default: (): ITableConfig => ({
      height: '50vh',
      fit: true,
      showIndex: false,
      showSingleSelect: false,
      showSelect: false,
      stripe: false
    })
  },
  tableColumn: {
    type: Array<ITableColumn>,
    default: (): Array<ITableColumn> => []
  },
  tableData: {
    type: Array<any>,
    default: (): Array<any> => []
  }
});
const { tableData } = toRefs(props);

const emits = defineEmits(['selectable', 'selectableChange', 'currentChange']);

const singleTableRef = ref();

// 多选框动态显示
function selectable(row: any) {
  let flag = true;
  emits('selectable', row, (data: boolean) => (flag = data));
  return flag;
}

// 多选框选择变化
function selectionChangeHandle(selection: Array<any>) {
  emits('selectableChange', selection);
}

// 单选框选择变化
function handleCurrentChange(val) {
  emits('currentChange', val, singleTableRef.value!.setCurrentRow);
}

const pageNum = ref(1);
const pageSize = ref(10);

function tableDoLayout() {
  singleTableRef.value.doLayout();
}

defineExpose({ tableDoLayout });
</script>

<style lang="scss" scoped></style>
